<html ng-app="app">
<head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>我的团队</title>

    <script type="text/javascript" src="<?php echo $image_url;?>files/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<?php echo $image_url;?>files/js/bscroll.min.js"></script>
    <script type="text/javascript" src="<?php echo $image_url;?>files/js/angular.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>
    <script type="text/javascript" src="<?php echo $image_url;?>files/js/fastclick.js"></script>

    <script type="text/javascript">

        $(function () {
            wx.config({
                debug: false,
                appId: "<?php echo $config_ary['appId'];?>",
                timestamp: "<?php echo $config_ary['timestamp'];?>",
                nonceStr:"<?php echo $config_ary['nonceStr'];?>",
                signature: "<?php echo $config_ary['signature'];?>",
                jsApiList: [
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'hideMenuItems',
                ]
            });

            wx.ready(function () {
                wx.hideOptionMenu();
            });;

        });

        var app = angular.module('app',[])

        app.controller("myCtrl", function($scope,$http) {
            $scope.width = window.innerWidth;
            $scope.height = window.innerHeight;
            $scope.baseURL = '<?php echo $base_url;?>';

            $scope.userInfo = {
                "id":"<?php echo $user['account_id'];?>",
                "name":"<?php echo $user['nickname'];?>",
                "avatar":"<?php echo $user['headimgurl'];?>",
                "card":0,
            }

            $scope.outRedPackages = new Array();
            $scope.outCodes = new Array();
            $scope.receiveRedPackages = new Array();
            $scope.receiveCodes = new Array();
            $scope.outBScroll = null;
            $scope.canLoadOut = true;
            $scope.receiveBScroll = null;
            $scope.canLoadReceive = true;

            $scope.outPage = 0 ;
            $scope.outTotalPage = 1;
            $scope.receivePage = 0;
            $scope.receiveTotalPage = 1;

            $(".main").show();
            $("#loading").hide();

            $scope.initOutScroll = function () {
                setTimeout(function() {
                    $scope.$apply();

                    if (!$scope.outBScroll) {
                        $scope.outBScroll = new BScroll(document.getElementById('out-box'), {
                            startX: 0,
                            startY: 0,
                            scrollY: true,
                            scrollX: false,
                            click: true,
                            probeType: 1,
                            bounce:false,
                        });

                        $scope.outBScroll.on('touchend', function (position) {
                            if(position.y <= (this.maxScrollY + 30) && $scope.canLoadOut) {
                                $scope.canLoadOut= false;
                                $scope.loadMoreOut();
                            }
                        });
                    } else {
                        $scope.outBScroll.refresh();
                    }
                }, 10);
            }

            $scope.initReceiveScroll = function () {
                setTimeout(function() {
                    $scope.$apply();

                    if (!$scope.receiveBScroll) {
                        $scope.receiveBScroll = new BScroll(document.getElementById('receive-box'), {
                            startX: 0,
                            startY: 0,
                            scrollY: true,
                            scrollX: false,
                            click: true,
                            probeType: 1,
                            bounce:false,
                        });


                        $scope.receiveBScroll.on('touchend', function (position) {
                            if(position.y <= (this.maxScrollY + 30) && $scope.canLoadReceive) {
                                $scope.canLoadReceive = false;
                                $scope.loadMoreReceive();
                            }
                        });

                    } else {
                        $scope.receiveBScroll.refresh();
                    }
                }, 10);
            }

            var formatShowTime = function (time) {

                var newDate = new Date();
                newDate.setTime(time * 1000);
                var year = newDate.getFullYear();
                var month = (newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1);
                var day = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate() ;
                var hour = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours() ;
                var min = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();

                var showTime = year + '-' + month + '-' + day + '        ' + hour +':' + min ;
                return showTime;
            }

            $scope.loadMoreOut = function () {
                if ($scope.outPage >= $scope.outTotalPage) {
                    $scope.canLoadOut = false;
                    return;
                }else{
                    $scope.canLoadOut = true;
                }
                $scope.getOutRedPackage();
                console.log('~~~~~loadMoreOut~~~~~');
            }

            $scope.loadMoreReceive = function () {
                if ($scope.receivePage >= $scope.receiveTotalPage) {
                    $scope.canLoadReceive = false;
                    return;
                }else{
                    $scope.canLoadReceive = true;
                }
                $scope.getReceiveRedPackage();
                console.log('~~~~~loadMoreReceive~~~~~');
            }

            $scope.getOutRedPackage = function () {
                $http({
                    url:$scope.baseURL + 'ay/sMT',
                    method:'POST',
                    header:{'Content-Type':'application/x-www-form-urlencoded'},
                    data:{
                        'dl':false,
                        'page':$scope.outPage + 1,
                    }})
                    .success(function (data, header, config, status) {
                        console.log(data);
                        //请求成功页面加1
                        $scope.outTotalPage = data.sum_page;
                        $scope.outPage = $scope.outPage + 1;
                        for (x in data.data) {
                            var tmpTime = formatShowTime(data.data[x].create_time);
                            var value = {
                                'nickname': data.data[x].nickname,
                                'account_id' : data.data[x].account_id,
                                'headimgurl':data.data[x].headimgurl,
                                'user_code':data.data[x].user_code,
                                'time':tmpTime
                            }

                            $scope.outCodes.push(data.data[x].user_code);
                            $scope.outRedPackages.push(value);
                        }

                        setTimeout(function () {
                            $(".outDiv").show();
                        }, 1);

                        $scope.initOutScroll();
                        console.log($scope.outRedPackages);
                    }).error( function (data, header, config, status) {
                    console.log(data.result_message);
                }) ;
            }

            $scope.getReceiveRedPackage = function () {
                $http({
                    url:$scope.baseURL + 'ay/sMT',
                    method:'POST',
                    header:{'Content-Type':'application/x-www-form-urlencoded'},
                    data:{
                        'dl':true,
                        'page':$scope.receivePage + 1,
                    }})
                    .success(function (data, header, config, status) {
                        //请求成功页数加1
                        $scope.receivePage = $scope.receivePage + 1;
                        $scope.receiveTotalPage = data.sum_page;
                        //alert("代理的");
                        //alert($scope.receiveTotalPage);
                        for (x in data.data) {
                            var tmpTime = formatShowTime(data.data[x].create_time);
                            var value = {
                                'nickname': data.data[x].nickname,
                                'account_id' : data.data[x].account_id,
                                'headimgurl':data.data[x].headimgurl,
                                'user_code':data.data[x].user_code,
                                'time':tmpTime
                            }

                            $scope.receiveCodes.push(data.data[x].user_code);
                            $scope.receiveRedPackages.push(value);
                        }
                        $scope.initReceiveScroll();
                        $scope.canLoadReceive = true;
                        console.log($scope.receiveRedPackages);
                    }).error( function (data, header, config, status) {
                    $scope.canLoadReceive = true;
                    console.log(data.result_message);
                }) ;
            }
            $scope.getOutRedPackage();
            $scope.getReceiveRedPackage();

            //切换到发出记录
            $scope.clickOutRedPackage = function () {
                $(".outDiv").show();
                $(".receiveDiv").hide();

                $("#selectTab").css("left", $scope.width * 0.15 + 'px');
                $("#outRP").css("color", "white");
                $("#reveiveRP").css("color", "black");
                $scope.initOutScroll();
            }
            //切换到收取记录
            $scope.clickReceiveRedPackage = function () {
                $(".receiveDiv").show();
                $(".outDiv").hide();

                $("#selectTab").css("left", $scope.width * 0.51 + 'px');
                $("#outRP").css("color","black");
                $("#reveiveRP").css("color","white");

                $scope.initReceiveScroll();
            }

            $scope.clickCell = function (data) {
                window.location.href = "<?php echo $base_url;?>ay/rpD?red_code=" + data.code;
            }

        })

    </script>

</head>
<link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/css/activity.css">

<body ng-controller="myCtrl" style="background: #fff;" >
<div style="position: fixed;width:100%;height:100%;top:0;left:0;background: #000" id="loading">
    <img src="<?php echo $image_url;?>files/images/loading.gif" style="top: 40%;position: absolute;left: 50%;margin-left: -45px;margin-top: -45px;" />
</div>
<div class="main" style="display: none;">

    <div id="out-box" class="outDiv" style="position: fixed;top: 84px; width: 100%; height: {{height - 84}}px; overflow: hidden; display: none;" when-scrolled="loadMoreOut()">
        <div id="out-scroll" style="position: relative;width: 100%;">
            <div ng-model="outRedPackages" ng-repeat="record in outRedPackages" class="bline" style="overflow: hidden; height: 80px;">
                <div style="height: 80px;">
                    <!--
                    <div class="height:48px;"><img src="{{record.headimgurl}}" width=48></div>
                    <label style="position: relative; margin-left: {{width * 0.08}}px; top: 10px; width: {{width * 0.42}}px; color: black; overflow: hidden; display: block; height: 24px;"> {{record.nickname}}</label>
                    <label style="position: relative; top: 5px; margin-left: {{width * 0.08}}px; width: {{width * 0.42}}px; color: lightgray; overflow: hidden; display: block; height: 24px;"> 加入时间：{{record.time}}</label>
                    <label style="position: relative; margin-left: 0px; top: -11; background-color: lightgray; height: 0.8px; width: 100%; overflow: hidden; display: block;">ID：{{record.user_code}}</label>
                    <label style="position: relative; margin-left: 0px; top: -11; background-color: lightgray; height: 0.8px; width: 100%; overflow: hidden; display: block;"></label>
                    -->
                    <table width=100% cellspacing=0 cellpadding=0 border=0 style="margin-top:16px">
                        <tr>
                            <td width=70 rowspan=2 align=center>
                                <img src="{{record.headimgurl}}" width=48>
                            </td>
                            <td>
                                <span class="cB fs18 h30 lh30">{{record.nickname}}</span>
                                <span class="c9 fs15 h30 lh30 fr mr10">ID: {{record.user_code}}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="c9 fs12 h20 lh20 fl">加入时间：{{record.time}}</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <style>
        body{margin:0px;padding:0px;}
        li, ol, ul { list-style: none; margin:0px; padding:0px; }
        .bgf5 { background: #f5f5f5; }
        .top { height: 44px; line-height: 44px; background: #ffa500; z-index: 10000000; }
        .top-title{ text-align:center; font-size:16px; font-weight:bold; color:#fff; }
        .bgf { background: #ffffff; }
        .mt5 { margin-top: 5px; }
        .w6 { width: 60%; }
        .fr { float: right; }
        .fl { float: left; }
        .mt15 { margin-top: 15px; }
        .ml10{margin-left:10px;}
        .mr10{margin-right:10px;}
        .w { width: 100%; }
        .ptb10 { padding-top: 10px; padding-bottom: 10px; }
        .lh30 { line-height: 30px; }
        .h30 { height: 30px; }
        .fs18 { font-size: 18px; }
        .fs12{font-size:12px;}
        .cB { color: #6e80a6; }
        .c9{color:#999;}
        .cred { color: #ff2d5e; }
        .c8{color:#888}
        .tline { border-top: #ddd solid 1px; }
        .bline { border-bottom: #ddd solid 1px; }
        .btn-loading{ width:100%; height:40px; float:left; margin-bottom:10px; background:#fff; }
        .btn-large{ width:100%; float:left; height:40px; text-align:center; color:#555; font-size:13px; background:#fff; margin-top:3px; line-height:40px;}
        .btn-large img{margin-right:5px;}
    </style>
    <!--
    <div id="out-box" class="outDiv" style="position: fixed;top: 84px; width: 100%; height: {{height - 84}}px; overflow: hidden; display: none;" when-scrolled="loadMoreOut()">
        <div id="out-scroll" style="position: relative;width: 100%;">
            <ul ng-model="outRedPackages" style="position:re" class="bline" ng-repeat="record in outRedPackages" >
                <li>
                    <div class="w ptb10 fl">
                        <table width=100% cellspacing=0 cellpadding=0 border=0>
                            <tr>
                                <td width=70 rowspan=2 align=center>
                                    <img src="{{record.headimgurl}}" width=48>
                                </td>
                                <td>
                                    <span class="cB fs18 h30 lh30">{{record.nickname}}</span>
                                    <span class="c9 fs15 h30 lh30 fr mr10">ID: {{record.user_code}}</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="c9 fs12 h20 lh20 fl">加入时间：{{record.time}}</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    -->

    <div id="receive-box" class="receiveDiv" style="position: fixed;top: 84px; width: 100%; height: {{height - 84}}px; overflow: hidden; display: none;"  when-scrolled="loadMoreReceive()">
        <div id="receive-box" style="position: relative;width: 100%">
            <div  ng-model="receiveRedPackages" ng-repeat="value in receiveRedPackages" class="bline" style="overflow: hidden; height: 80px;">
                <div style="height: 80px;">
                    <!--
                    <label style="position: relative; margin-left: {{width * 0.08}}px; top: 10px; width: {{width * 0.42}}px; color: black; overflow: hidden; display: block; height: 24px;"> {{record.nickname}}</label>
                    <label style="position: relative; top: 5px; margin-left: {{width * 0.08}}px; width: {{width * 0.42}}px; color: lightgray; overflow: hidden; display: block; height: 24px;"> 加入时间：{{record.time}}</label>
                    <label style="position: relative; margin-left: 0px; top: -11; background-color: lightgray; height: 0.8px; width: 100%; overflow: hidden; display: block;">ID：{{record.user_code}}</label>
                    <label style="position: relative; margin-left: 0px; top: -11; background-color: lightgray; height: 0.8px; width: 100%; overflow: hidden; display: block;"></label>
                    -->
                    <table width=100% cellspacing=0 cellpadding=0 border=0 style="margin-top:16px">
                        <tr>
                            <td width=70 rowspan=2 align=center>
                                <img src="{{value.headimgurl}}" width=48>
                            </td>
                            <td>
                                <span class="cB fs18 h30 lh30">{{value.nickname}}</span>
                                <span class="c9 fs15 h30 lh30 fr mr10">ID: {{value.user_code}}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="c9 fs12 h20 lh20 fl">加入时间：{{value.time}}</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

   <!--
    <div id="receive-box" class="receiveDiv" style="position: fixed;top: 84px; width: 100%; height: {{height - 84}}px; overflow: hidden; display: none;"  when-scrolled="loadMoreReceive()">
        <div id="receive-box" style="position: relative;width: 100%">
            <ul class="tline">

                    <li ng-model="receiveRedPackages" ng-repeat="value in receiveRedPackages" >
                        <div class="w bline ptb10 fl">
                            <table width=100% cellspacing=0 cellpadding=0 border=0>
                                <tr>
                                    <td width=70 rowspan=2 align=center>
                                        <img src="{{value.headimgurl}}" width=48>
                                    </td>
                                    <td>
                                        <span class="cB fs18 h30 lh30">{{value.nickname}}</span>
                                        <span class="c9 fs15 h30 lh30 fr mr10">ID: {{value.user_code}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="c9 fs12 h20 lh20 fl">加入时间：{{value.time}}</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </li>
            </ul>
        </div>
    </div>
    -->

    <div style="position: fixed; height: 44px; top: 20px; left: {{width * 0.15}}px; width: {{width * 0.7}}px; border-color: orange; border-style: solid; border-radius: 30px; border-width: 2px; background-color: white; overflow: hidden;">
    </div>

    <div id="selectTab" style="position: fixed; top: 20px; left:{{width * 0.15}}px; width: {{width * 0.35}}px; height: 46px; background-color: orange;border-radius: 23px; z-index: 1"></div>

    <label id="outRP" style="font-size: 13pt; text-align: center; color: white; position: fixed; top: 32px; left: {{width * 0.15}}px; width: {{width * 0.35}}px; z-index: 2" ng-click="clickOutRedPackage()">团队成员</label>
    <label id="reveiveRP" style="font-size: 13pt; text-align: center; color: black; position: fixed; top: 32px; left: {{width * 0.15 + width * 0.35}}px; width: {{width * 0.35}}px; z-index: 2" ng-click="clickReceiveRedPackage()">代理成员</label>

    <div class="swiper-pagination" style="display: none;"></div>

</div>

</body>
</html>
